/*------------------------------------
 * sext-vi
 *
 * @author linghua.zhang@me.com
 * @link http://lhzhang.com/
 * @update 2013-11-11
 *
 * |/ | (~ (~
 * |\.|._)._)
 * --------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Lekton);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web);

$page-width: 680;
$font: "Lekton", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
$monospace: "Lekton", monospace;
$label-font: "Titillium Web", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
$background-color: #f9f9f9;

@mixin page($width: $page-width) { width: #{$width}px; margin: 0 auto; }

* { margin: 0; padding: 0; }
body { font-size: 14px; font-family: #{$font}; color: #555; background-color: $background-color; }
ol, ul { list-style-position: inside; }
li { padding: .2em 0; }
hr { width: 4em; border: none; border-top: 1px dashed #d0d0d0; border-bottom: 1px dashed #f9f9f9; }
.center { text-align: center; }
::selection { color: #fff; background-color: #333; }
a { text-decoration: none; color: #bb2222; &:hover { color: #dd1144; }; }
blockquote { background-color: #f8f8f8; padding: 0 1em; border: 1px dashed #eee !important; border-color: #e0e0e0 !important; font-size: 13px; font-family: #{$monospace}; line-height: 1.6; display: block; overflow: auto; }
pre code { @extend blockquote; }
code { background-color: #f8f8f8; padding: 2px 5px; border: 1px dashed #e0e0e0; }
h1, h2 { font-size: 1.4em; }

header {
  @include page;
  text-align: justify;
  margin: 3em auto;
  &:after { content: ''; width: 100%; display: inline-block; }

  #header {
    display: inline-block;
    position: relative;
    top: 1em;
    h1 {
      font-family: #{$label-font};
      a { @extend a;
        color: #a9a9a9; background-color: #e9e9e9; display: block; padding: 0 .5em; border-radius: 4px; 
        &:hover { color: #fff; background-color: #dd2222; }
      }
    }
  }

  nav {
    display: inline-block;
    position: relative;
    top: 1em;
    span { margin: .5em; }
    a {
      font-family: #{$label-font}; color: #ccc;
    }
  }
}

#content {
  @include page;
  line-height: 2em;
  .main-listing { margin-bottom: 2em; }
}

ul.listing {
  margin-top: 1em;
  li {
    list-style-type:none;
    padding: 0;
    &.listing-item { a { padding: .2em 0 .2em 2em; } time { color: #999; } &:hover { background-color: #f9f9f9; } }
    &.listing-seperator { font-family: #{$label-font}; &:before { content: "⭠ "; color: #ccc; } }
  }
}

article {
  margin: 2em 0;
  p { padding: .7em 0; }
  .title {
    font-family: #{$label-font};
    a { @extend a; color: #777; }
  }

  .meta {
    display: block;
    overflow: auto;
    margin-top: -.5em;
    font-size: .9em;
    .tags a { @extend a; color: #999999; padding: .25em; }
  }

  .post { img { max-width: #{$page-width}px; display: block; margin: .5em auto; } }
  .comment { margin: 3em 0; }
  .divider {
    margin: 2em 0;

    i { margin: 0 2em; color: #e9e9e9; }

    a { @extend a;
      font-family: #{$label-font};
      margin: 0 2em;
      i { color: #999999; margin: 0; &:hover { color: #bb2222 !important; } }
    }
  }
  .divider {
    position: relative;
    font-size: 1em;
    z-index: 1;
    overflow: hidden;
    text-align: center;
  }
  .divider:before, .divider:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 49%;
    height: 2px;
    content: '\a0';
    background-color: #f0f0f0;
  }
  .divider:before { margin-left: -50%; text-align: right; }
  .divider:after { margin-left: 1%; }
}

footer {
  @include page;
  display: block;
  color: #909090;
  font-family: #{$label-font};
  font-size: .9em;
  text-align: center;
  margin: 1em auto;
  a { color: #cccccc; &:hover { color: #999999; }; }

}

#tag_cloud { margin-bottom: 1em; }

// gist
.gist { font-size: 13px; line-height:1.6; }
